<template>
  <view :id="linId" class="mxp-index-list-item">
    <view class="item-title-box">
      <slot name="title">
        <view class="title-box" :style="{ background: titleBackground, padding: titlePadding }">
          <text :style="{ color: titleColor, fontSize: titleFontSize }">{{ item.title }}</text>
        </view>
      </slot>
    </view>
    <view class="item-vessel" :style="{ background: childListBackground, padding: childListPadding, borderRadius: childListBorderRadius }">
      <template v-for="(child, index2) in item.data" :key="index2">
        <slot name="item" :item="child" :index="index2">
          <list-item
            :child="child"
            :color="childItemColor"
            :fontSize="childItemFontSize"
            :activeColor="activeItemColor"
            :padding="childItemPadding"
            :showSelectedIcon="showSelectedIcon"
            :index="index2"
            :selectedList="selectedList"
            :disabledList="disabledList"
            @itemClick="onClickItem"
          ></list-item>
        </slot>
      </template>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { type PropType, getCurrentInstance, nextTick, onMounted } from 'vue';
  import type { $IndexListChildItem, $IndexListItem } from '../mxp-index-list.vue';
  import type { $AllColorStr, $SizeUnitArr4Str, $SizeUnitStr } from '@/mxp-ui/mxp-tool/types/interface';
  import ListItem from './components/list-item.vue';

  import { getDomSize } from '../../mxp-tool/utils/dom';
  import { getOnlyID } from '../../mxp-tool/utils/common';
  defineOptions({
    name: 'mxp-index-list-item',
  });

  const props = defineProps({
    /** 标题颜色 */
    titleColor: { type: String as PropType<$AllColorStr>, required: true },
    /** 标题背景色 */
    titleBackground: { type: String as PropType<$AllColorStr>, required: true },
    /** 标题字体大小 */
    titleFontSize: { type: String as PropType<$SizeUnitStr>, required: true },
    /** 标题的边距 如：'10rpx 20rpx' 或者 '10rpx'等等 */
    titlePadding: { type: String as PropType<$SizeUnitArr4Str>, required: true },
    /** 子选项列表的背景色 */
    childListBackground: { type: String as PropType<$AllColorStr>, required: true },
    /** 子选项列表的边距 如：'10rpx 20rpx' 或者 '10rpx'等等 */
    childListPadding: { type: String as PropType<$SizeUnitArr4Str>, required: true },
    /** 子选项列表的圆角 */
    childListBorderRadius: { type: String as PropType<$SizeUnitStr>, required: true },
    /** 每个子选项的文字颜色 */
    childItemColor: { type: String as PropType<$AllColorStr>, required: true },
    /** 每个子选项的文字大小 */
    childItemFontSize: { type: String as PropType<$SizeUnitStr>, required: true },
    /** 每个子选项列表的边距 如：'10rpx 20rpx' 或者 '10rpx'等等 */
    childItemPadding: { type: String as PropType<$SizeUnitArr4Str>, required: true },
    /** 选项的选中的文字颜色 */
    activeItemColor: { type: String as PropType<$AllColorStr>, required: true },
    /** 当前item数据 */
    item: { type: Object as PropType<$IndexListItem>, required: true },
    /** 选中的值 */
    selectedList: { type: Array as PropType<unknown[]>, required: true },
    /** 禁止点击的值（那些值禁止选中或取消选中） */
    disabledList: { type: Array as PropType<unknown[]>, required: true },
    /** 选中时是否显示勾选的图标 */
    showSelectedIcon: { type: Boolean, required: true },
  });
  defineSlots<{
    /** 标题 */
    title?: () => void;
    /** 自定义子项 */
    item?: (data: { item: $IndexListChildItem; index: number }) => void;
  }>();
  const emits = defineEmits<{
    (e: 'itemClick', item: $IndexListChildItem, index: number): void;
  }>();
  const instance = getCurrentInstance();
  const linId = getOnlyID('index-list-item');
  onMounted(() => {
    nextTick(async () => {
      const res = await getDomSize(`#${linId}`, instance);
      // eslint-disable-next-line vue/no-mutating-props
      props.item.height = res.height || 0;
      // eslint-disable-next-line vue/no-mutating-props
      props.item.top = res.top || 0;
    });
  });

  /**
   * 点击事件
   */
  function onClickItem(childItem: $IndexListChildItem, index: number) {
    emits('itemClick', childItem, index);
  }
</script>

<style lang="scss" scoped>
  .mxp-index-list-item {
    box-sizing: border-box;
    width: 100%;
    padding: 0 15px;

    .item-title-box {
      position: sticky;
      top: 0;
      z-index: 99;
      background: transparent;

      .title-box {
        box-sizing: border-box;
        padding: 8px 0;
      }
    }

    .item-vessel {
      padding: 15px;
      background: #f2f2f2;
      border-radius: 10px;
    }
  }
</style>
